<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <title>Lists</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="../../dist/css/ionic.css" rel="stylesheet">
    <style>
      #list {
        height: 100%;
        position: relative;
        overflow: hidden;
      }
    </style>
    <script src="../../dist/js/ionic.bundle.js"></script>
    <script>
      angular.module('ionicApp', ['ionic'])
    </script>
  </head>
  <body class="ionic-pseudo">

    <header class="bar bar-header bar-dark">
      <h1 class="title">Lists</h1>
    </header>

    <div id="list">
    <ion-content id="content" class="has-header">

      <div class="list">

          <div class="item item-divider">
            Work
          </div>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-email"></i>
            Check mail
          </a>

          <a href="#" class="item item-icon-left item-icon-right">
            <i class="icon ion-chatbubble-working"></i>
            Call Ma
            <i class="icon ion-chevron-right icon-accessory"></i>
          </a>

          <a href="#" class="item item-icon-right">
            Right side nav icon
            <i class="icon ion-chevron-right icon-accessory"></i>
          </a>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-chevron-left icon-accessory"></i>
            Left side nav icon
          </a>

        </div>

        <div class="list">

          <div class="item item-divider">
            Work
          </div>

          <a href="#" class="item item-icon-left item-icon-right">
            <i class="icon ion-email"></i>
            Check mail
            <span class="badge">5</span>
            <i class="icon ion-chevron-right icon-accessory"></i>
          </a>

          <div class="item item-icon-left item-button-right">
            <i class="icon ion-chatbubble-working ion-primary"></i>
            Left Icon and Right Button
            <button class="button button-positive">
              <i class="icon ion-ios7-telephone"></i>
            </button>
          </div>

          <div class="item item-button-right">
            Right Button
            <button class="button button-positive">
              <i class="icon ion-ios7-telephone"></i>
            </button>
          </div>

          <div class="item item-button-right">
            Right Button Text
            <button class="button button-positive">
              <i class="icon ion-ios7-telephone"></i> Text
            </button>
          </div>

          <div class="item item-icon-left item-button-right">
            <i class="icon ion-chatbubble-working ion-primary"></i>
            Call Ma
            <div class="buttons">
              <button class="button button-positive">
                <i class="icon ion-ios7-telephone"></i>
              </button>
              <button class="button button-balanced">
                <i class="icon ion-ios7-camera"></i>
              </button>
            </div>
          </div>

          <div class="item item-button-left">
            <button class="button button-positive">
              <i class="icon ion-ios7-telephone"></i>
            </button>
            Me Button
          </div>

          <div class="item item-input-inset">
            <label class="item-input-wrapper">
              <i class="icon ion-search placeholder-icon"></i>
              <input type="search" placeholder="Search">
            </label>
            <button class="button button-clear">
              Cancel
            </button>
          </div>

          <div class="item item-input-inset">
            <label class="item-input-wrapper">
              <input type="text" placeholder="Email">
            </label>
            <button class="button button-positive icon ion-arrow-right-c">
              Submit
            </button>
          </div>

          <div class="item item-input-inset">
            <label class="item-input-wrapper">
              <input type="text" placeholder="Email">
            </label>
            <button class="button button-small button-positive icon ion-arrow-right-c">
              Submit
            </button>
            <button class="button button-small button-positive icon ion-arrow-right-c">
              Cancel
            </button>
            <button class="button button-small button-positive icon ion-arrow-right-c">
              Cancel
            </button>
          </div>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-loading-d positive"></i>
            Record album
            <span class="item-note">
              Grammy
            </span>
          </a>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-flask calm"></i>
            Breaking Bad
            <span class="item-note">
              Blue, yellow, pink
            </span>
          </a>

          <div class="item item-divider">
            Leisure
            <span class="badge badge-positive">33</span>
          </div>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-game-controller-b energized"></i>
            Games
            <span class="item-note">
              Super Mario
            </span>
          </a>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-music-note assertive"></i>
            Music
            <span class="item-note">
              JT
            </span>
          </a>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-bag"></i>
            Shopping
            <span class="item-note">
              Bag
            </span>
          </a>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-person-stalker energized fill-icon"></i>
            Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
            asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
            asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
            <span class="badge badge-assertive">0</span>
          </a>

        </div>

        <div class="list">

          <div class="list-header">
            List Header
          </div>

          <div href="#" class="item">
            Not a link so no default right arrow
            <span class="badge badge-assertive">999</span>
          </div>

          <div class="item item-button-right">
            Badge with right button: Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
            asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
            asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
            <span class="badge badge-royal">999</span>
            <button class="button button-calm">
              <i class="icon ion-ios7-telephone"></i>
            </button>
          </div>

          <a href="#" class="item item-complex item-icon-right">
            <div class="item-content slide-right">
              Processing Icon
              <i class="icon ion-loading-b"></i>
            </div>
          </a>

          <div class="item item-divider">
            List Divider
          </div>

          <a href="#" class="item item-complex">
            <div class="item-content slide-left">
              Computers
              <span class="badge">Badge</span>
            </div>
            <div class="item-options">
             <button class="button">Button</button>
           </div>
          </a>

          <a href="#" class="item item-complex">
            <div class="item-content slide-left">
              Monitors
              <span class="badge">6</span>
            </div>
            <div class="item-options">
             <button class="button">Button</button>
           </div>
          </a>

        </div>

        <h3>List with padding</h3>
        <div class="padding">
          <div class="list">

            <a href="#" class="item item-complex">
              <div class="item-content slide-right">
                Madison, WI
              </div>
            </a>

            <div class="item item-divider">
              List Divider
            </div>

            <a href="#" class="item item-complex">
              <div class="item-content slide-left">
                Driving Directions
              </div>
              <div class="item-options">
               <button class="button">Button</button>
             </div>
            </a>

            <a href="#" class="item item-complex">
              <div class="item-content">
                Computers
                <span class="badge">3</span>
              </div>
            </a>

          </div>
        </div>

        <h3>List with card</h3>
        <div class="list card">

          <a href="#" class="item item-complex">
            <div class="item-content slide-right">
              Madison, WI
            </div>
          </a>

          <a href="#" class="item item-complex">
            <div class="item-content slide-left">
              Driving Directions
            </div>
            <div class="item-options">
             <button class="button">Button</button>
           </div>
          </a>

          <div class="item item-divider">
            List Divider
          </div>

          <a href="#" class="item item-complex">
            <div class="item-content">
              Computers
              <span class="badge">3</span>
            </div>
          </a>

        </div>

        <div class="list">

          <div class="item item-divider">
            Without .item-content
          </div>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-heart brand-assertive"></i>
            Madison, WI
          </a>

          <a href="#" class="item item-icon-left">
            <i class="icon ion-image brand-energized"></i>
            Driving Directions
          </a>

          <a href="#" class="item item-icon-left item-icon-right">
            <i class="icon ion-ios7-cog gray"></i>
            Settings
            <i class="icon ion-ios7-information-outline"></i>
          </a>

        </div>

        <div class="list">

          <a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
            <div class="item-content">
              <i class="icon ion-heart brand-assertive fill-icon"></i>
              Madison, WI
              <i class="icon ion-chevron-right icon-accessory"></i>
            </div>
          </a>

          <a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
            <div class="item-content slide-left">
              <i class="icon ion-image brand-energized fill-icon"></i>
              Driving Directions
              <i class="icon ion-chevron-right icon-accessory"></i>
            </div>
            <div class="item-options">
             <button class="button">Button</button>
           </div>
          </a>

          <a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
            <div class="item-content slide-right">
              <i class="icon ion-ios7-cog gray fill-icon"></i>
              Settings
              <i class="icon ion-chevron-right icon-accessory"></i>
            </div>
          </a>

        </div>

        <div class="list">

          <div class="list-header">
            Me List Header
          </div>

          <a href="#" class="item item-icon-left">
            <div class="item-content">
              <i class="icon ion-heart brand-assertive fill-icon"></i>
              Icon is filled!!
            </div>
          </a>

          <a href="#" class="item item-icon-left">
            <div class="item-content">
              <i class="icon ion-image brand-energized fill-icon"></i>
              .fill-icon
            </div>
          </a>

          <div class="item item-divider">
            List Divider
          </div>

          <a href="#" class="item item-icon-left item-icon-right">
            <i class="icon ion-ios7-cog gray fill-icon"></i>
            Default has no wrap! This is a list item with really really really really really
            really really really really long long long long long long
            text text text texxxxxttt text testy text!!!
            <i class="icon ion-chevron-right icon-accessory"></i>
          </a>

          <a href="#" class="item item-icon-left item-icon-right item-text-wrap">
            <i class="icon ion-ios7-cog gray fill-icon"></i>
            Assigned "item-text-wrap". This is a list item with really really really really really
            really really really really long long long long long long
            text text text texxxxxttt text testy text!!!
            <i class="icon ion-chevron-right icon-accessory"></i>
          </a>

          <a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
            <div class="item-content slide-left slide-right">
              <i class="icon ion-ios7-cog gray fill-icon"></i>
              Default no wrap and has item-content! This is a list item with really really really really really
              really really really really long long long long long long
              text text text texxxxxttt text testy text!!!
              <i class="icon ion-chevron-right icon-accessory"></i>
            </div>
            <div class="item-options">
             <button class="button">Button</button>
           </div>
          </a>

          <a href="#" class="item item-complex item-icon-left item-icon-right item-text-wrap item-slider">
            <div class="item-content slide-left slide-right">
              <i class="icon ion-ios7-cog gray fill-icon"></i>
              Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
              really really really really long long long long long long
              text text text texxxxxttt text testy text!!!
              <i class="icon ion-chevron-right icon-accessory"></i>
            </div>
            <div class="item-options">
             <button class="button">Button</button>
           </div>
          </a>

        </div>

        <div class="padding">
          <button class="button button-secondary" id="btn-test-right">Test Slide Right</button>
          <button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
        </div>

        <h3>Thumbnails .item-thumbnail</h3>
        <div class="list">

          <a href="#" class="item item-avatar-left">
            <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
            <h2>Pretty Hate Machine</h2>
            <p>Nine Inch Nails</p>
          </a>

          <a href="#" class="item item-complex item-avatar-left">
            <div class="item-content">
              <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
              <h2>Nevermind</h2>
              <p>Nirvana</p>
            </div>
          </a>

          <a href="#" class="item item-avatar-right">
            <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
            <h2>License To Ill</h2>
            <p>Bestie Boys</p>
          </a>

          <a href="#" class="item item-complex item-avatar-right">
            <div class="item-content">
              <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
              <h2>gjpqy</h2>
              <p>Test descenders.</p>
            </div>
          </a>

        </div>

        <h3>Large Thumbnails .item-thumbnail-left and .item-thumbnail-right</h3>
        <div class="list">

          <a href="#" class="item item-thumbnail-left">
            <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
            <h2>Pretty Hate Machine</h2>
            <p>Nine Inch Nails</p>
          </a>

          <a href="#" class="item item-complex item-thumbnail-left">
            <div class="item-content">
              <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
              <h2>Nevermind</h2>
              <p>Nirvana</p>
            </div>
          </a>

          <a href="#" class="item item-thumbnail-right">
            <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
            <h2>License To Ill</h2>
            <p>Bestie Boys</p>
          </a>

          <a href="#" class="item item-complex item-thumbnail-right">
            <div class="item-content">
              <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
              <h2>Dookie</h2>
              <p>Green Day</p>
            </div>
          </a>

        </div>

        <div class="padding">
          <a class="button button-secondary" href="./">All CSS Tests</a>
        </div>

        <h3>Colors</h3>
        <div class="list">
          <a class="item" href="#">Default</a>
          <a class="item item-light" href="#">item-light</a>
          <a class="item item-stable" href="#">item-stable</a>
          <a class="item item-positive" href="#">item-positive</a>
          <a class="item item-calm" href="#">item-calm</a>
          <a class="item item-assertive" href="#">item-assertive</a>
          <a class="item item-balanced" href="#">item-balanced</a>
          <a class="item item-energized" href="#">item-energized</a>
          <a class="item item-royal" href="#">item-royal</a>
          <a class="item item-dark" href="#">item-dark</a>
        </div>

    </ion-content>
  </div>



    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $("#btn-test-left").click(function(){

        if(this.isLeft) {
          // back to normal
          this.isLeft = false;
          $(".slide-left").css({
            left: "0"
          })
          $(".list").removeClass("item-opened");
        } else {
          // open
          this.isLeft = true;
          $(".slide-left").css({
            left: "-72px"
          })
          $(".list").addClass("item-opened");
        }


        return false;
      });

      $("#btn-test-right").click(function(){

        if(this.isRight) {
          // back to normal
          this.isRight = false;
          $(".slide-right").css({
            left: "0"
          })
          $(".list").removeClass("item-opened");
        } else {
          // open
          this.isRight = true;
          $(".slide-right").css({
            left: "72px"
          })
          $(".list").addClass("item-opened");
        }

        return false;
      });


    </script>

  </body>
</html>
